<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - Shioa (Enhanced)</title>
    <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Paper Shaders CDN -->
    <script src="https://cdn.jsdelivr.net/npm/@paper-design/shaders@latest/dist/index.js"></script>
    <!-- Motion (Framer Motion) CDN -->
    <script src="https://cdn.jsdelivr.net/npm/motion@11.11.13/dist/motion.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            overflow: hidden;
        }
        
        #shader-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;
        }
        
        .login-container {
            position: relative;
            z-index: 1;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .auth-card {
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            box-shadow: 
                0 25px 50px -12px rgba(0, 0, 0, 0.25),
                0 0 80px rgba(255, 255, 255, 0.1);
            transform: translateY(20px);
            opacity: 0;
        }
        
        .form-input {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            transition: all 0.3s ease;
        }
        
        .form-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
        
        .form-input:focus {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
        }
        
        .login-btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .login-btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.6s;
        }
        
        .login-btn:hover:before {
            left: 100%;
        }
        
        .floating-particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            pointer-events: none;
        }
        
        .title-glow {
            text-shadow: 
                0 0 10px rgba(255, 255, 255, 0.5),
                0 0 20px rgba(255, 255, 255, 0.3),
                0 0 30px rgba(255, 255, 255, 0.1);
        }
    </style>
</head>
<body class="font-sans">
    <!-- Shader Background Canvas -->
    <canvas id="shader-canvas"></canvas>
    
    <!-- Floating Particles -->
    <div id="particles-container"></div>
    
    <div class="login-container">
        <div class="max-w-md w-full space-y-8">
            <div class="auth-card p-8" id="authCard">
                <!-- Logo区域 -->
                <div class="text-center" id="logoArea">
                    <h1 class="text-4xl font-bold text-white mb-2 title-glow" id="mainTitle">Shioa</h1>
                    <p class="text-lg text-white opacity-80 mb-8" id="subtitle">登录您的智能分析平台</p>
                </div>
                
                <!-- 登录表单 -->
                <form id="loginForm" class="space-y-6">
                    <div id="errorMessage" class="hidden bg-red-500 bg-opacity-20 border border-red-400 text-red-100 px-4 py-3 rounded-lg backdrop-blur-sm"></div>
                    
                    <div class="form-group" id="usernameGroup">
                        <label for="username" class="block text-white text-sm font-medium mb-2">用户名或邮箱</label>
                        <input 
                            type="text" 
                            id="username" 
                            name="username" 
                            required 
                            class="form-input appearance-none rounded-lg relative block w-full px-4 py-3 placeholder-white placeholder-opacity-60 text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-30 focus:z-10 sm:text-sm"
                            placeholder="请输入用户名或邮箱"
                        >
                    </div>
                    
                    <div class="form-group" id="passwordGroup">
                        <label for="password" class="block text-white text-sm font-medium mb-2">密码</label>
                        <input 
                            type="password" 
                            id="password" 
                            name="password" 
                            required 
                            class="form-input appearance-none rounded-lg relative block w-full px-4 py-3 placeholder-white placeholder-opacity-60 text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-30 focus:z-10 sm:text-sm"
                            placeholder="请输入密码"
                        >
                    </div>
                    
                    <div class="flex items-center justify-between" id="rememberSection">
                        <div class="flex items-center">
                            <input 
                                id="remember-me" 
                                name="remember-me" 
                                type="checkbox" 
                                class="h-4 w-4 text-white focus:ring-white border-white border-opacity-30 rounded bg-transparent"
                            >
                            <label for="remember-me" class="ml-2 block text-sm text-white">
                                记住我
                            </label>
                        </div>
                    </div>
                    
                    <div id="submitSection">
                        <button 
                            type="submit" 
                            id="loginBtn"
                            class="login-btn group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white focus:ring-opacity-30 transition duration-300 ease-in-out"
                        >
                            <span id="loginBtnText">登录</span>
                            <span id="loginBtnLoading" class="hidden">登录中...</span>
                        </button>
                    </div>
                    
                    <div class="text-center" id="registerLink">
                        <p class="text-white opacity-80">
                            还没有账户？
                            <a href="register.html" class="font-medium text-yellow-300 hover:text-yellow-200 transition duration-150 ease-in-out">
                                立即注册
                            </a>
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </div>    <script>
        // Wait for libraries to load
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize shader background
            initShaderBackground();
            
            // Initialize Motion animations
            initAnimations();
            
            // Create floating particles
            createFloatingParticles();
            
            // Setup form handlers
            setupFormHandlers();
        });

        function initShaderBackground() {
            const canvas = document.getElementById('shader-canvas');
            const ctx = canvas.getContext('2d');
            
            // Set canvas size
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            
            // Create animated gradient background using canvas
            let time = 0;
            
            function animate() {
                time += 0.01;
                
                // Create gradient
                const gradient = ctx.createLinearGradient(
                    0, 0, 
                    canvas.width * Math.cos(time * 0.5), 
                    canvas.height * Math.sin(time * 0.3)
                );
                
                gradient.addColorStop(0, `hsl(${240 + Math.sin(time) * 30}, 70%, ${30 + Math.sin(time * 0.7) * 10}%)`);
                gradient.addColorStop(0.5, `hsl(${280 + Math.cos(time * 0.8) * 40}, 80%, ${40 + Math.cos(time * 0.5) * 15}%)`);
                gradient.addColorStop(1, `hsl(${220 + Math.sin(time * 1.2) * 35}, 75%, ${25 + Math.sin(time * 0.9) * 12}%)`);
                
                ctx.fillStyle = gradient;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // Add floating orbs
                for (let i = 0; i < 3; i++) {
                    const x = canvas.width * 0.5 + Math.cos(time + i * 2) * 200;
                    const y = canvas.height * 0.5 + Math.sin(time * 0.8 + i * 1.5) * 150;
                    const radius = 30 + Math.sin(time + i) * 20;
                    
                    const orbGradient = ctx.createRadialGradient(x, y, 0, x, y, radius);
                    orbGradient.addColorStop(0, 'rgba(255, 255, 255, 0.1)');
                    orbGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
                    
                    ctx.fillStyle = orbGradient;
                    ctx.beginPath();
                    ctx.arc(x, y, radius, 0, Math.PI * 2);
                    ctx.fill();
                }
                
                requestAnimationFrame(animate);
            }
            
            animate();
            
            // Handle resize
            window.addEventListener('resize', () => {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            });
        }

        function initAnimations() {
            const { animate, stagger } = Motion;
            
            // Animate card entrance
            animate('#authCard', 
                { opacity: [0, 1], y: [50, 0] },
                { duration: 1, ease: 'easeOut' }
            );
            
            // Animate form elements with stagger
            animate('.form-group', 
                { opacity: [0, 1], x: [-20, 0] },
                { duration: 0.6, delay: stagger(0.1, { start: 0.3 }) }
            );
            
            // Animate title
            animate('#mainTitle', 
                { opacity: [0, 1], scale: [0.8, 1] },
                { duration: 0.8, delay: 0.2 }
            );
            
            // Animate subtitle
            animate('#subtitle', 
                { opacity: [0, 1], y: [20, 0] },
                { duration: 0.6, delay: 0.4 }
            );
            
            // Animate button
            animate('#submitSection', 
                { opacity: [0, 1], y: [20, 0] },
                { duration: 0.6, delay: 0.8 }
            );
            
            // Animate register link
            animate('#registerLink', 
                { opacity: [0, 1] },
                { duration: 0.6, delay: 1 }
            );
            
            // Add hover animations for inputs
            document.querySelectorAll('.form-input').forEach(input => {
                input.addEventListener('focus', () => {
                    animate(input, 
                        { scale: [1, 1.02], y: [0, -2] },
                        { duration: 0.3 }
                    );
                });
                
                input.addEventListener('blur', () => {
                    animate(input, 
                        { scale: [1.02, 1], y: [-2, 0] },
                        { duration: 0.3 }
                    );
                });
            });
            
            // Add button hover animation
            const loginBtn = document.getElementById('loginBtn');
            loginBtn.addEventListener('mouseenter', () => {
                animate(loginBtn, 
                    { scale: [1, 1.05] },
                    { duration: 0.3 }
                );
            });
            
            loginBtn.addEventListener('mouseleave', () => {
                animate(loginBtn, 
                    { scale: [1.05, 1] },
                    { duration: 0.3 }
                );
            });
        }

        function createFloatingParticles() {
            const container = document.getElementById('particles-container');
            const particleCount = 20;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'floating-particle';
                
                const size = Math.random() * 4 + 2;
                particle.style.width = size + 'px';
                particle.style.height = size + 'px';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                
                container.appendChild(particle);
                
                // Animate particle
                const { animate } = Motion;
                animate(particle, 
                    {
                        x: [0, (Math.random() - 0.5) * 100],
                        y: [0, (Math.random() - 0.5) * 100],
                        opacity: [0, 0.6, 0]
                    },
                    {
                        duration: Math.random() * 3 + 2,
                        repeat: Infinity,
                        repeatType: 'reverse',
                        ease: 'linear'
                    }
                );
            }
        }

        function setupFormHandlers() {
            // Original login form functionality
            const loginForm = document.getElementById('loginForm');
            const errorMessage = document.getElementById('errorMessage');
            const loginBtn = document.getElementById('loginBtn');
            const loginBtnText = document.getElementById('loginBtnText');
            const loginBtnLoading = document.getElementById('loginBtnLoading');

            // 显示错误信息
            function showError(message) {
                errorMessage.textContent = message;
                errorMessage.classList.remove('hidden');
                
                // Animate error message
                const { animate } = Motion;
                animate(errorMessage, 
                    { opacity: [0, 1], y: [-10, 0] },
                    { duration: 0.3 }
                );
            }

            // 隐藏错误信息
            function hideError() {
                errorMessage.classList.add('hidden');
            }

            // 设置加载状态
            function setLoading(isLoading) {
                if (isLoading) {
                    loginBtn.disabled = true;
                    loginBtnText.classList.add('hidden');
                    loginBtnLoading.classList.remove('hidden');
                    loginBtn.classList.add('opacity-50');
                } else {
                    loginBtn.disabled = false;
                    loginBtnText.classList.remove('hidden');
                    loginBtnLoading.classList.add('hidden');
                    loginBtn.classList.remove('opacity-50');
                }
            }

            // 登录函数
            async function login(username, password, rememberMe) {
                try {
                    const response = await fetch(`${API_BASE_URL}/auth/login`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            username: username,
                            password: password,
                            remember_me: rememberMe
                        })
                    });

                    const data = await response.json();

                    if (data.success) {
                        console.log('✅ [Login] 登录成功，响应数据:', data);
                        
                        // Success animation
                        const { animate } = Motion;
                        animate('#authCard', 
                            { scale: [1, 1.1, 1], opacity: [1, 0.8, 1] },
                            { duration: 0.6 }
                        );
                        
                        // 保存token
                        localStorage.setItem('access_token', data.access_token);
                        localStorage.setItem('user_info', JSON.stringify(data.user));
                        
                        // 跳转到主页
                        setTimeout(() => {
                            window.location.href = '/';
                        }, 1000);
                    } else {
                        showError(data.message || '登录失败，请重试');
                    }
                } catch (error) {
                    console.error('登录错误:', error);
                    showError('网络错误，请检查连接后重试');
                }
            }

            // 表单提交处理
            loginForm.addEventListener('submit', async (e) => {
                e.preventDefault();
                hideError();
                setLoading(true);

                const formData = new FormData(loginForm);
                const username = formData.get('username').trim();
                const password = formData.get('password');
                const rememberMe = formData.get('remember-me') === 'on';

                // 基本验证
                if (!username || !password) {
                    showError('请填写所有必填字段');
                    setLoading(false);
                    return;
                }

                try {
                    await login(username, password, rememberMe);
                } catch (error) {
                    showError('登录失败，请重试');
                } finally {
                    setLoading(false);
                }
            });

            // 检查是否已登录
            const token = localStorage.getItem('access_token');
            if (token) {
                // 验证token是否有效
                fetch(`${API_BASE_URL}/auth/verify`, {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // 已登录，跳转到主页
                        window.location.href = '/';
                    }
                })
                .catch(() => {
                    // token无效，清除
                    localStorage.removeItem('access_token');
                    localStorage.removeItem('user_info');
                });
            }
        }
    </script>
    <script src="js/config.js"></script>
    <script src="js/api.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/shared-navigation.js"></script>
    <script src="js/env.js"></script>
</body>
</html>